<script>
import {defineComponent} from 'vue'
import UInput from "../../../uni_modules/uview-ui/components/u--input/u--input.vue";
import UButton from "../../../uni_modules/uview-ui/components/u-button/u-button.vue";
import ModuleCard from "../module-card/index.vue";
import UForm from "../../../uni_modules/uview-ui/components/u-form/u-form.vue";
import UFormItem from "../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";

export default {
  name: "search-bar",
  components: {UFormItem, UForm, UButton, UInput, ModuleCard},
  props: {
    statusList: {
      type: Array,
      default: () => [
        {label: '待审核', value: '待审核'},
        {label: '审核不通过', value: '审核不通过'},
        {label: '待下单', value: '待下单'},
        {label: '待安装', value: '待安装'},
        {label: '安装验收退回', value: '安装验收退回'},
        {label: '待安装验收', value: '待安装验收'},
        {label: '并网验收退回', value: '并网验收退回'},
        {label: '待并网', value: '待并网'},
        {label: '待上传发票', value: '待上传发票'},
        {label: '待签署合同', value: '待签署合同'},
        {label: '待并网验收', value: '待并网验收'},
        {label: '已完成', value: '已完成'},
        {label: '待变更审核', value: '待变更审核'},
      ]
    },
  },
  data() {
    return {
      keyword: '',
      show: false,
      formData: {},
    }
  }
}
</script>

<template>
  <view>
    <view class="cell">
      <view class="cell-bd">
        <!--<u-input-->
        <!--    placeholder="请输入查询内容"-->
        <!--    prefixIcon="search"-->
        <!--    shape="circle"-->
        <!--    prefixIconStyle="font-size: 22px;color: #909399"-->
        <!--&gt;</u-input>-->
        <u-search
            placeholder="请输入查询内容"
            v-model="keyword"
            shape="round"
            :showAction="false"
        ></u-search>
      </view>
      <view class="cell-ft btn">
        <u-button
            type="primary"
            icon="grid-fill"
            shape="circle"
            text="筛选"
            size="small"
            @click="show = true"
        ></u-button>
      </view>
    </view>
    <u-popup :show="show" :round="10" mode="right" @close="show = false">
      <view class="popup">
        <u--form
            labelPosition="top"
            :model="formData"
            ref="uForm"
            labelWidth="100px"
            :labelStyle="{'align-self': 'start', 'font-size': '14px'}"
        >
          <module-card title="条件筛选">
            <u-form-item
                label="项目编码"
                prop="formData.field"
                ref="item1"
            >
              <u-row customStyle="margin-bottom: 10px;width: 100%" gutter="10">
                <u-col span="6">
                  <view class="check-item checked">YYG-ZY-yunnan</view>
                </u-col>
                <u-col span="6">
                  <view class="check-item">YYG-ZY-yunnan</view>
                </u-col>
              </u-row>
            </u-form-item>
            <u-form-item
                label="状态"
                prop="formData.field"
                ref="item2">
                <view>
                  <view class="check-item" v-for="item in statusList">{{item.label}}</view>
                </view>
            </u-form-item>
          </module-card>
        </u--form>
      </view>
    </u-popup>
  </view>
</template>

<style scoped lang="scss">
.cell{
  margin-top: 0px;
}
.btn{
  padding-left: 10px;
}
.popup{
  width: 90vw;
}
.check-item{
  padding: 5px 10px;
  border-radius: 5px;
  //background-color: #f5f7fa;
  color: #606266;
  cursor: pointer;
  font-size: 12px;
  display: inline-block;
  border: 1px solid #eee;
  margin: 5px;
  min-width: 90px;
  text-align: center;
  &.checked{
    background-color: #ebeef5;
    color: rgb(16, 178, 141);
    border: 1px solid rgb(16, 178, 141);
  }
  &:active{
    background-color: #ebeef5;
    color: rgb(16, 178, 141);
    border: 1px solid rgb(16, 178, 141);
  }
}
</style>
